<template>
  <van-skeleton v-if="isReady" title :row="10" />
  <div v-else class="goods-detail">
    <van-nav-bar title="商品详情" left-arrow @click-left="onClickLeft" />
    <div class="goods-img">
      <img :src="`http://localhost:8088/${goods.product_img}`" alt="" />
    </div>
    <div class="price">￥{{ goods.product_price }}</div>
    <div class="goods-title">
      {{ goods.product_name }}
    </div>
    <div class="goods-service">
      <van-tag plain size="large">包邮</van-tag>
      <van-tag plain size="large">7天无理由退货</van-tag>
      <van-tag plain size="large">72小时发货</van-tag>
      <van-tag plain size="large">上门换新</van-tag>
      <van-tag plain size="large">免费上门退换</van-tag>
    </div>
    <div class="goods-activity">
      <van-cell-group>
        <van-cell title="活动" size="large" value="80元立减" is-link />
        <van-cell title="服务" size="large" value="七天无理由退货" is-link />
      </van-cell-group>
    </div>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" />
      <van-action-bar-icon icon="cart-o" text="购物车" @click="goCart" />
      <van-action-bar-icon icon="star-o" text="已收藏" />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="joinCart"
        color="#1ba784"
      />
      <van-action-bar-button
        type="danger"
        text="立即购买"
        @click="goBuy"
        color="#ff3800"
      />
    </van-action-bar>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
import { getGoodsDetail } from '@/api/modules/goods'
import { addCart } from '@/api/modules/cart'
import { showToast } from 'vant'
import { useUserStore } from '@/store/user.store'
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const isReady = ref(true)
// 返回上一页
const onClickLeft = () => router.back()

// -----------获取商品详情-----------------
const goods = ref({
  product_img: ''
})
const getDetail = async () => {
  // console.log(route)
  const {
    data: { data }
  } = await getGoodsDetail({ id: route.query.id })
  // console.log(data)
  goods.value = data
  isReady.value = false
}
// 切换到购物车页面
const goCart = () => {
  router.replace('/Cart')
}

// 立即购买
const goBuy = () => {
  router.push({
    name: 'OrderConfirm',
    query: {
      oneGoods: JSON.stringify(goods.value)
    }
  })
}

// 加入购物车
const joinCart = async () => {
  try {
    const {
      userInfo: { app_user_id }
    } = userStore

    const { data } = await addCart({
      user_id: app_user_id,
      product_id: goods.value.product_id,
      quantity: 1
    })
    console.log(data)
    showToast('加入购物车成功')
  } catch (error) {
    console.log(error)

    showToast('请先登录')
    router.push('/Login')
  }
}

// -----------获取商品详情-----------------

// -----------生命周期函数-----------------

onMounted(() => {
  getDetail()
})
// -----------生命周期函数-----------------
</script>

<style lang="less" scoped>
.goods-detail {
  .goods-img {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 90%;
    }
  }
  .price {
    padding: 0 10px;
    line-height: 30px;
    font-size: 1.6rem;
    color: @red;
  }
  .goods-title {
    padding: 10px;
    font-size: 1.3rem;
    line-height: 30px;
    color: #333;
    font-weight: bold;
  }
  .goods-service {
    padding: 10px;
    van-tag {
      margin-left: 10px !important;
    }
  }
}
</style>
